#{extends 'main.html' /}
#{set title:'Crane Studio' /}


<table border="0" cellpadding="0" cellspacing="0" id="content">
	    <tr>
	       <td valign="top">
		  		  	<div class="appliance-view">
		  		  	             <div id="page-view">
                            <h2 class="pagetitle">Virtual Appliance Library</h2>
                            <p>Welcome to the Library. Here you will find a wide range of powerful applications packaged in ovf virtual appliance format. </p>
                        </div>
                        <div class="content-container">
                        #{if pages==0}
                            <p>Sorry, no virtual appliance is submit untill now!</p>
                        #{/if}
                        #{else}
                            <div class="view-content"> 
                            #{list items:appliances, as:'appliance'}                                               
                                <div class="views-row">  
                                        <div class="content-item">
                                            <div style="float: left;">
			                                           <a href="/app/lampd"><img src="${appliance.imageurl}" alt="Icon" /></a>
                                            </div>
                                            <div style="float: right; width: 16em; margin-left: 5px;">
			                                           <b>App Version:</b> ${appliance.appVersion}<br />
			                                           <b>Appliance Version:</b> ${appliance.vaVersion} <br /> 			
			                                           <b>Updated:</b> ${appliance.postedAt}<br /><br />
                                             </div>
                                             <div style="margin-right: 17em; margin-left: 90px;">
                                                 <h2 class="title"><a href="/app/lampd">${appliance.title}</a></h2>
                                                 ${appliance.content}
                                             </div>
                                         </div>
                                 </div>
					 													 #{/list}
					 													 #{ if pages > 1}                   				 						 
                            <div class="item-list">
							   	                 <ul class="pager">
							   	                                                      %{	
							   	                   upper = page +3;
							   	                   lower = page -3;
							   	                   if (lower < 1){
							   	                       upper=upper+1-lower;
							   	                       lower=1;
							   	                       if (upper>pages) upper=pages;
							   	                   }else{
							   	                       if(upper > pages){
							   	                           lower = lower - (upper-pages);
							   	                           upper = pages;
							   	                           if(lower<1) lower=1;
							   	                                                                     }
							   	                                                           } 						   	                   			   	                                                      
                                  for ( i in lower..upper){
                                      if (i==page) out.print("<li class=\"pager-current\">${i}</li>");
                                      else out.print("<li class=\"pager-item\"><a href=\"library?page=${i}\" title=\"Go to page ${i}\" class=\"active\">${i}</a></li>");
                                                                                           }
                                                                                        }%
                                 </ul>
							                 </div>
							                 #{/if} 
							          </div> 
							          #{/else}
							          </div>
           </div>  
	         </td>
           <td id="sidebar-right">
                 <div class="block block-block" id="block-block-4">
                     <h2 class="title">JumpBox Collections</h2>
                     <div class="content"><div class="item-list"><ul><li class="first"><a href="/library/New%20Additions">New Additions</a></li>
                         <li><a href="/library/Blogging">Blogging</a></li>
                         <li><a href="/library/Bug%20Tracking">Bug Tracking</a></li>
                         <li><a href="/library/Content%20Management">Content Management</a></li>
                         <li><a href="/library/CRM">CRM</a></li>
                         <li><a href="/library/Customer%20Service">Customer Service</a></li>
                         <li><a href="/library/Database%20Management">Database Management</a></li>
                         <li><a href="/library/Development%20Tools">Development Tools</a></li>
                         <li><a href="/library/Discussion%20Forums">Discussion Forums</a></li>
                         <li><a href="/library/Document%20Management">Document Management</a></li>
                         <li><a href="/library/eCommerce">eCommerce</a></li>
                         <li><a href="/library/Education">Education</a></li>
                     </ul></div></div>
                 </div>

              </td>
          </tr>
</table>      		 

	

	
